<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Score Distribution</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <style>
    .card {
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="container my-5">
    <div class="row g-4 mb-4">
      <div class="col-md-3">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-body">
            <h5 class="card-title">Average Math</h5>
            <p><span id="average-math-score"></span></p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-body">
            <h5 class="card-title">Average English</h5>
            <p><span id="average-english-score"></span></p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-body">
            <h5 class="card-title">Average Political</h5>
            <p><span id="average-political-score"></span></p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-body">
            <h5 class="card-title">Average Major</h5>
            <p><span id="average-major-score"></span></p>
          </div>
        </div>
      </div>
    </div>

    <div class="row g-4">
      <div class="col-md-6">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-header bg-body">Math Scores</div>
          <div class="card-body">
            <canvas id="chart-bar"></canvas>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-header bg-body">English Scores</div>
          <div class="card-body">
            <canvas id="chart-line"></canvas>
          </div>
        </div>
      </div>
    </div>

    <div class="row g-4 mt-4">
      <div class="col-md-6">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-header bg-body">Major Scores</div>
          <div class="card-body">
            <canvas id="chart3"></canvas>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-header bg-body">Political Scores</div>
          <div class="card-body">
            <canvas id="chart4"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
  <script>
    $(function () {
      // AJAX 请求获取平均分数
      $.ajax({
        url: 'http://127.0.0.1:8000/admins/img/', // 替换为实际的 API 路径
        method: 'GET',
        success: function (response) {
          const scoreInfo = response.score_info;
          $('#average-math-score').text(scoreInfo.ave_mathscore.toFixed(2)); 
          $('#average-english-score').text(scoreInfo.ave_englishscore.toFixed(2));
          $('#average-political-score').text(scoreInfo.ave_political.toFixed(2));
          $('#average-major-score').text(scoreInfo.ave_major.toFixed(2));

          // 修改分数段为 15 个
          const mathScoreDistribution = generateScoreDistribution(scoreInfo.math_score_distribution, 15, 150);
          const majorScoreDistribution = generateScoreDistribution(scoreInfo.major_score_distribution, 15, 150);

          // 渲染分数段统计图表
          renderScoreDistributionChart('chart-bar', 'Math Scores', mathScoreDistribution);
          renderScoreDistributionChart('chart-line', 'English Scores', scoreInfo.english_score_distribution);
          renderScoreDistributionChart('chart3', 'Major Scores', majorScoreDistribution);
          renderScoreDistributionChart('chart4', 'Political Scores', scoreInfo.political_score_distribution);
        },
        error: function (xhr, status, error) {
          console.error("请求失败:", error);
        }
      });

      function renderScoreDistributionChart(canvasId, label, scoreDistribution) {
        new Chart(document.getElementById(canvasId).getContext('2d'), {
          type: 'bar',
          data: {
            labels: Object.keys(scoreDistribution),
            datasets: [{
              label: label,
              data: Object.values(scoreDistribution),
              backgroundColor: [
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(75, 192, 192, 0.6)',
                'rgba(153, 102, 255, 0.6)',
                'rgba(255, 159, 64, 0.6)',
                'rgba(255, 99, 132, 0.6)',
                'rgba(201, 203, 207, 0.6)',
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(75, 192, 192, 0.6)',
                'rgba(153, 102, 255, 0.6)',
                'rgba(255, 159, 64, 0.6)',
                'rgba(255, 99, 132, 0.6)',
                'rgba(201, 203, 207, 0.6)',
                'rgba(54, 162, 235, 0.6)'
              ],
              borderColor: [
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255, 99, 132, 1)',
                'rgba(201, 203, 207, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255, 99, 132, 1)',
                'rgba(201, 203, 207, 1)',
                'rgba(54, 162, 235, 1)'
              ],
              borderWidth: 1
            }]
          },
          options: {
            responsive: true,
            plugins: {
              title: {
                display: true,
                text: label
              }
            },
            scales: {
              x: {
                title: {
                  display: true,
                  text: '分数段'
                }
              },
              y: {
                beginAtZero: true,
                title: {
                  display: true,
                  text: '人数'
                }
              }
            }
          }
        });
      }

      function generateScoreDistribution(originalDistribution, numSegments, maxScore) {
        const scoreDistribution = {};
        const segmentSize = Math.ceil(maxScore / numSegments);

        for (let i = 0; i < numSegments; i++) {
          const start = i * segmentSize;
          const end = (i + 1) * segmentSize;
          const label = `${start}-${end}`;
          scoreDistribution[label] = originalDistribution[label] || 0;
        }

        return scoreDistribution;
      }

      // 图表响应式处理
      window.onresize = function () {
        for (let id in Chart.instances) {
          Chart.instances[id].resize();
        }
      };
    });
  </script>
</body>
</html>